<template>
  <div style="margin-top: -20px">
    <div style="display: flex;margin-bottom: 0px;align-items: center">
      <div>
        <el-button
          type="primary"
          size="mini"
          plain
          @click="fanhui()"
        >
          返回
        </el-button>
      </div>
      <h1 style="margin-left: 15px">查看许可证</h1>
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">许可证详情</el-menu-item>
      <el-menu-item index="2">借出记录({{ totalBorrow }})</el-menu-item>
      <el-menu-item index="5">历史记录({{ total }})</el-menu-item>
      <el-menu-item index="7">文件({{ fileTotal }})</el-menu-item>
    </el-menu>
    <div class="line"></div>
    <!--许可证详情-->
    <el-row v-show="activeIndex === '1'&&chooseItemTwo" style="width: 100%;margin-top: 30px">
      <el-col :span="12">
        <el-form v-if="chooseItemTwo">
          <el-form-item label="许可证名称">
            <span>{{ chooseItemTwo.name?chooseItemTwo.name:'--' }}</span>
          </el-form-item>
          <el-form-item label="序列号">
            <span>{{ chooseItemTwo.serial?chooseItemTwo.serial:'--' }}</span>
          </el-form-item>
          <el-form-item label="采购价格">
            <span>{{ chooseItemTwo.purchase_cost?chooseItemTwo.purchase_cost:'--' }}</span>
          </el-form-item>
          <el-form-item label="授权使用数量">
            <span>{{ chooseItemTwo.seats?chooseItemTwo.seats:'--' }}</span>
          </el-form-item>
          <el-form-item label="剩余授权使用数量">
            <span>{{ ( chooseItemTwo.seats -  chooseItemTwo.checkout_seats) }}</span>
          </el-form-item>
          <el-form-item label="备注">
            <span>{{ chooseItemTwo.notes?chooseItemTwo.notes:'--' }}</span>
          </el-form-item>
          <el-form-item label="授权人名称">
            <span>{{ chooseItemTwo.license_name?chooseItemTwo.license_name:'--' }}</span>
          </el-form-item>
          <el-form-item label="授权人Email">
            <span>{{ chooseItemTwo.license_email?chooseItemTwo.license_email:'--' }}</span>
          </el-form-item>
          <el-form-item label="订单编号">
            <span>{{ chooseItemTwo.order_number?chooseItemTwo.order_number:'--' }}</span>
          </el-form-item>
          <el-form-item label="采购订单号">
            <span>{{ chooseItemTwo.purchase_order ?chooseItemTwo.purchase_order:'--' }}</span>
          </el-form-item>
          <el-form-item label="是否折旧">
            <el-switch
              v-model="chooseItemTwo.depreciate"
              active-color="#13ce66"
              :disabled="true"
              inactive-color="#f1f1f1"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form>
          <el-form-item label="可重新授权">
            <el-switch
              v-model="chooseItemTwo.reassignable"
              active-color="#13ce66"
              :disabled="true"
              inactive-color="#f1f1f1"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="购买日期">
           <span>{{chooseItemTwo.purchase_date?chooseItemTwo.purchase_date:'--'}}</span>
          </el-form-item>
          <el-form-item label="到期日期">
            <span>{{ chooseItemTwo.expiration_date?chooseItemTwo.expiration_date:'--' }}</span>
          </el-form-item>
          <el-form-item label="终止日期">
            <span>{{ chooseItemTwo.termination_date?chooseItemTwo.termination_date:'--' }}</span>
          </el-form-item>
          <el-form-item label="当前值">
            <span>{{ chooseItemTwo.name?chooseItemTwo.name:'--' }}</span>
          </el-form-item>
          <el-form-item label="订单号">
            <span>{{ chooseItemTwo.order_number?chooseItemTwo.order_number:'--' }}</span>
          </el-form-item>
          <el-form-item label="供应商">
            <span>{{ chooseItemTwo.supplier_name?chooseItemTwo.supplier_name:'--' }}</span>
          </el-form-item>
          <el-form-item label="采购订单编号">
            <span>{{ chooseItemTwo.purchase_order?chooseItemTwo.purchase_order:'--' }}</span>
          </el-form-item>
          <el-form-item label="制造商">
            <span>{{ chooseItemTwo.manufacturer_name?chooseItemTwo.manufacturer_name:'--' }}</span>
          </el-form-item>
          <el-form-item label="折旧名称">
            <span>{{ chooseItemTwo.depreciation_name?chooseItemTwo.depreciation_name:'--' }}</span>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--借出记录-->
    <div v-if="activeIndex === '2'">
      <BorrowTooList :asset-id="this.chooseItemTwo.id+''" asset-type="license" @changeData="changeData"></BorrowTooList>
    </div>
    <!--历史记录-->
    <div v-if="activeIndex === '5'">
      <HistoryList :asset-id="this.chooseItemTwo.id+''" asset-type="license" @changeData="changeData"></HistoryList>
    </div>
    <div v-if="activeIndex === '7'&&chooseItemTwo">
      <file :category-type="categoryTypeName" :file-id="chooseItemTwo.id" @updateNumber="updateNumberFile"></file>
    </div>
    <el-dialog :title="titleOutOrin" :visible.sync="openOutOrin" width="60%" append-to-body>
      <el-form ref="formOutin" :model="returnRequest" label-width="220px">
        <el-form-item label="归还备注">
          <el-input v-model="returnRequest.checkin_notes" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormOutIn">确 定</el-button>
        <el-button @click="openOutOrin = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import file from "@/views/components/file";
import { licenseCheckin, listLicenserecords } from "@/api/vadmin/assets/licenses";
import { listUploads } from "@/api/file";
import HistoryList from "@/views/components/HistoryList";
import BorrowTooList from "@/views/components/BorrowTooList";
import { assignedInfo, checkHis } from "@/api/vadmin/basic/base";

export default {
  name: "LicensesDetail",
  components: { file, HistoryList, BorrowTooList },
  props: {
    topId: {
      type: Number,
      default: 0
    },
    chooseItem: {
      type: Object,
      default: {}
    },
    active: {
      type: String,
      default: "1"
    }
  },
  data() {
    return {
      totalBorrow: 0,
      openOutOrin: false,
      titleOutOrin: "归还",
      liuWarterList: [],
      categoryTypeName: "license",
      chooseItemTwo: null,
      activeIndex: "1",
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        kit: null,
        tag: "model"
      },
      // 表单参数
      form: {
        kit: null,
        tag: "model",
        quantity: 2,
        id: null
      },
      fileTotal: 0,
      returnRequest: {
      }
    };
  },
  mounted() {
    this.activeIndex = this.active;
    this.form.kit = this.topId;
    this.queryParams.kit = this.topId;
    this.chooseItemTwo = this.chooseItem;
    this.queryParams.bind_id = this.fileId;
    this.queryParams.category_type = this.categoryType;
    this.refreshData();
  },
  methods: {
    refreshData() {
      listUploads({ bind_id: this.chooseItemTwo.id, category_type: this.categoryTypeName }).then(response => {
        this.fileTotal = response.data.count;
      });
      assignedInfo({ asset_type: "license", asset_id: this.chooseItemTwo.id }).then(res => {
        this.totalBorrow = res.data.count;
      });
      this.getList();
    },
    changeData() {
      this.refreshData();
    },
    getList() {
      checkHis({ asset_id: this.chooseItemTwo.id, asset_type: "license" }).then(res => {
        this.total = res.data.count;
      });
    },
    submitFormOutIn() {
      licenseCheckin(this.returnRequest).then(res => {
        this.openOutOrin = false;
        this.returnRequest.checkin_notes = "";
        this.$message({
          message: "归还成功",
          type: "success"
        });
        listLicenserecords({ license: this.chooseItemTwo.id }).then(res => {
          this.liuWarterList = res.data.results;
          this.loading = false;
        });
      });
    },
    changeInOut(val) {
      this.returnRequest.id = val.id;
      this.returnRequest.checkin_qty = val.checkout_qty;
      this.openOutOrin = true;
    },
    updateNumberFile(number) {
      this.fileTotal = number;
      this.$forceUpdate();
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key + "";
      if (this.activeIndex === "5") {
        listLicenserecords({ license: this.chooseItemTwo.id }).then(res => {
          this.liuWarterList = res.data.results;
          this.loading = false;
        });
      }
    },
    fanhui() {
      this.$emit("fanhui");
    }
  }
};
</script>
<style>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  margin-top: 15px;
}
</style>
